<template>
  <v-app  >
    <v-app-bar
        fixed
        hide-on-scroll
        :value="bar"
      >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer/>
      <div>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-icon
                color="white"
                dark
                v-bind="attrs"
                v-on="on"
                @click="$router.push('/Home')"
                large
            >
              mdi-home
            </v-icon>
          </template>
          <span>首页</span>

        </v-tooltip>
      </div>
    </v-app-bar>
    <v-navigation-drawer
        v-model="drawer"
        app
    >
    <v-list
            nav
            dense
            v-model="nav"
            class="my-list"
    >
      <v-list-item class="my-list" @click="scroll(item)" v-for="(item,index) in nav " :key="index">
        <v-list-item-content class="my-list">
          {{item}}}
        </v-list-item-content>
      </v-list-item>

    </v-list>
    </v-navigation-drawer>

    <v-main
        class="mt-15"
    >
      <v-container class="pa-5"
      >
      <v-row>
        <v-col
        cols="12"
        >
        <v-alert
            type="info"
            v-model="alert"
            dismissible
            color="cyan"
            border="left"
            elevation="2"
            colored-border
        >
          点击上方按钮回到首页
        </v-alert>

        </v-col>
      </v-row>
          <div  v-if="content" style="width: 100%" >
            <pre-md   :content="content" style="width: 100%" />
          </div>

      </v-container>
    </v-main>
  </v-app>
</template>
<script>

import PreMd from "../components/pre-md";

export default{
  components: {PreMd},
  data(){
    return{
      title:null,
      content:null,
      alert:true,
      h:undefined,
      nav:[],
      drawer:true,
      bar:true

    }

  },
  mounted() {
    this.title = this.$route.params.title
    var index = -1;
    this.$store.state.info.map((item,i)=>{
      if(item.title===this.title){
        index = i;
      }
    })
    this.content = this.$store.state.cleanContext[index]
    this.$nextTick(()=>{


      this.h = document.getElementsByTagName("h2")
    })
    document.body.scrollTop = document.documentElement.scrollTop = 0;

  },
  watch:{
    h:function (newVal){
      var tmp = []
      for (var i =0;i<newVal.length;i++){
        tmp.push(newVal[i].id)
      }
      this.nav = tmp.slice()
    },
  },
  methods:{
    scroll(to){
      document.getElementById(to).scrollIntoView()
      this.drawer =!this.drawer
    }
  }
}


</script>
<style>
html{
  scroll-behavior: auto;
  scroll-behavior: smooth;
}
</style>
